<script lang="ts" setup name="login">
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
/**
 * setup
 * @param {*}
 * @returns
 */
interface FormState {
  username: string
  password: string
  remember: boolean
}
const formState = reactive<FormState>({
  username: '',
  password: '',
  remember: true
})

interface RegisteredFormState {
  username: string
  password: string
  email: string
}

const registeredFormState = reactive<RegisteredFormState>({
  username: '',
  password: '',
  email: ''
})

const onFinish = (values: any) => {
  userStore.login(values)
}

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo)
}

/**
 * 登录 Or 注册
 */

const loginOrregistered = ref(false)
</script>

<template>
  <div class="sign-container" :class="[loginOrregistered ? 'sign-up-mode' : '']">
    <div class="forms-container">
      <div class="signin-signup">
        <a-form class="sign-in-form" :model="formState" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
          <div class="sign-in-for-box">
            <a-form-item :wrapper-col="{ offset: 6, span: 18 }">
              <h2>登录 Antd Design Pro</h2>
            </a-form-item>
            <a-form-item label="账号" name="username" :rules="[{ required: true, message: '请输入账号' }]">
              <a-input v-model:value="formState.username" />
            </a-form-item>

            <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
              <a-input-password v-model:value="formState.password" />
            </a-form-item>

            <a-form-item name="remember" :wrapper-col="{ offset: 6, span: 18 }">
              <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 6, span: 18 }">
              <a-button type="primary" html-type="submit" block>登录</a-button>
            </a-form-item>
          </div>
        </a-form>
        <a-form class="sign-up-form" :model="formState" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <div class="sign-up-for-box">
            <a-form-item :wrapper-col="{ offset: 6, span: 18 }">
              <h2>注册 Antd Design Pro</h2>
            </a-form-item>
            <a-form-item label="账号" name="registeredusername" :rules="[{ required: true, message: '请输入账号' }]">
              <a-input v-model:value="registeredFormState.username" />
            </a-form-item>
            <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
              <a-input-password v-model:value="registeredFormState.password" />
            </a-form-item>
            <a-form-item label="邮箱" name="password" :rules="[{ required: true, message: '请输入邮箱' }]">
              <a-input-password v-model:value="registeredFormState.email" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 6, span: 18 }">
              <a-button type="primary" html-type="submit" block>立即注册</a-button>
            </a-form-item>
          </div>
        </a-form>
      </div>
    </div>

    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
          <h3>加入我们</h3>
          <p>加入我们，成为本站的一份子。</p>
          <button class="btn transparent" id="sign-up-btn" @click="loginOrregistered = !loginOrregistered">去注册</button>
        </div>
        <UserImg src="log.svg" class="image" />
      </div>
      <div class="panel right-panel">
        <div class="content">
          <h3>已有帐号？</h3>
          <p>立即登录已有帐号，享受独家权益。</p>
          <button class="btn transparent" id="sign-in-btn" @click="loginOrregistered = !loginOrregistered">去登录</button>
        </div>
        <UserImg src="register.svg" class="image" />
      </div>
    </div>
  </div>
</template>

<style lang="less">
@import './index.less';
</style>
